<script setup lang="ts">
import type { UploadChangeParam, UploadFile } from 'ant-design-vue';

import { computed, ref } from 'vue';

import { useTabs } from '@vben/hooks';
import { MdiAdd, MdiClose, MdiMinus, MdiPlus, MdiQuestion } from '@vben/icons';

import { CloudUploadOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import {
  Button,
  Image,
  Input,
  InputNumber,
  message,
  Popover,
  Radio,
  RadioButton,
  RadioGroup,
  Select,
  Switch,
  Textarea,
  Upload,
} from 'ant-design-vue';

import { addRoomTypeInfo } from '#/api';
import { accept, headers, upApi } from '#/config/uploadConfig';
import { router } from '#/router';

const { closeTabByKey } = useTabs();

// 表单数据
const formData = ref({
  nameZh: '',
  roomNum: '',
  maxGuests: 1, // 最大人数
  maxAdult: 1, // 最大成人数
  maxChild: -1, // 最大儿童数
  windowType: 0, // 窗户  0-全部有窗户 1-部分有窗户 2-全部有窗户
  windowDesc: '', // 窗户说明
  smokingAllowed: 1, // 吸烟禁烟类型 0-禁烟 1-可吸烟 2-部分客房可吸烟
  floor: '', // 楼层
  areaType: 1, // 使用面积类型 1都相同 2不相同区间
  roomArea: '', // 最小面积值 或者为统一的面积
  maxArea: '', // 最大面积值
  roomDesc: '', // 房型描述
  isHot: false, // 是否为推荐房型
  enableStatus: true, // 是否显示
  sellPrice: '', // 房间价格
  breakfastCount: '', // 早餐数量
});
const bedTypeList = ref([{ bedType: '', bedWidth: '', bedNum: '' }]); // 床型方案

// 窗型列表选择
const bedTypeOptions = [
  {
    value: '单人床',
    min: 0.8,
    max: 1.3,
    label: '单人床(0.8-1.3m)',
    text: '单人床',
  },
  {
    value: '双人床',
    min: 1.31,
    max: 1.5,
    label: '双人床(1.31-1.5m)',
    text: '双人床',
  },
  {
    value: '大床',
    min: 1.51,
    max: 1.8,
    label: '大床(1.51-1.8m)',
    text: '大床',
  },
  {
    value: '特大床',
    min: 1.81,
    max: 3,
    label: '特大床(1.81-3m)',
    text: '特大床',
  },
  {
    value: '沙发床',
    min: 0.8,
    max: 5,
    label: '沙发床(0.8-5m)',
    text: '沙发床',
  },
  { value: '圆床', min: 1.31, max: 5, label: '圆床(1.31-5m)', text: '圆床' },
  { value: '水床', min: 1.31, max: 5, label: '水床(1.31-5m)', text: '水床' },
];
// 窗型说明列表
const windowDescOptions = [
  { value: '窗户可打开通风，且窗外是户外开放环境' },
  { value: '窗户无法打开' },
  { value: '窗户位于走廊或过道' },
  { value: '窗户较小' },
  { value: '窗外有墙体或遮挡' },
  { value: '天窗' },
  { value: '落地窗' },
  { value: '飘窗' },
  { value: '装饰性假窗' },
];

// 定义状态的ts类型
interface ErrStatus {
  nameZhStatus: '' | 'error' | 'warning' | undefined;
  roomNumStatus: '' | 'error' | 'warning' | undefined;
  bedTypeList: {
    bedNumStatus: '' | 'error' | 'warning' | undefined;
    bedWidthStatus: '' | 'error' | 'warning' | undefined;
    typeStatus: '' | 'error' | 'warning' | undefined;
  }[];
  windowDescStatus: '' | 'error' | 'warning' | undefined;
  roomAreaStatus: '' | 'error' | 'warning' | undefined;
  maxAreaStatus: '' | 'error' | 'warning' | undefined;
  imageListStatus: '' | 'error' | 'warning' | undefined;
  sellPriceStatus: '' | 'error' | 'warning' | undefined;
  breakfastCountStatus: '' | 'error' | 'warning' | undefined;
}

// 错误状态集合
const errStatusArr = ref<ErrStatus>({
  nameZhStatus: '',
  roomNumStatus: '',
  bedTypeList: [{ typeStatus: '', bedWidthStatus: '', bedNumStatus: '' }],
  windowDescStatus: '',
  roomAreaStatus: '',
  maxAreaStatus: '',
  imageListStatus: '',
  sellPriceStatus: '',
  breakfastCountStatus: '',
});
// 获取最小宽度输入
const getMinWidth = (bedType: string) => {
  const data = bedTypeOptions.find((item) => item.value === bedType);
  return data?.min || 0.8;
};

// 获取最大宽度输入
const getMaxWidth = (bedType: string) => {
  const data = bedTypeOptions.find((item) => item.value === bedType);
  return data?.max || 5;
};

// 入住人数设置
const options = Array.from({ length: 10 }).map((_, i) => ({
  value: i + 1,
}));
// 儿童熟人
const optionsChildren = Array.from({ length: 12 }).map((_, i) => ({
  value: i - 1,
  // eslint-disable-next-line unicorn/no-nested-ternary
  label: i === 0 ? '未知' : i === 1 ? '不接待' : i - 1,
}));

const peopleErrorText = computed(() => {
  const maxGuests = formData.value.maxGuests;
  const maxAdult = formData.value.maxAdult;
  const maxChild = Math.max(formData.value.maxChild, 0);
  if (maxGuests < maxAdult + maxChild) {
    return '最多入住人数不得小于最多入住成人数或最多入住儿童数';
  }
  if (maxGuests <= maxChild) {
    return '最多入住儿童数需小于最多入住人数';
  }
  return maxGuests === maxAdult ||
    maxGuests === maxChild ||
    maxGuests === maxAdult + maxChild
    ? ''
    : '最多入住人数必须和成人、儿童最多入住人数相符';
});

// 是否点击了添加
const isClickAdd = ref(false);

// 返回事件
const handleClose = async () => {
  closeTabByKey(`/info/room-info/room-info-add`);
  router.push('/info/room-info/room-info-list');
};
// 添加床型
const addBedType = () => {
  errStatusArr.value.bedTypeList = [
    ...errStatusArr.value.bedTypeList,
    { typeStatus: '', bedWidthStatus: '', bedNumStatus: '' },
  ];
  bedTypeList.value = [
    ...bedTypeList.value,
    { bedType: '', bedWidth: '', bedNum: '' },
  ];
};

// 删除一个房型
const deleteBedType = (index: number) => {
  bedTypeList.value.splice(index, 1);
  errStatusArr.value.bedTypeList.splice(index, 1);
};

interface UploadResponse {
  data?: {
    url?: null | string | undefined;
  };
}
interface CustomUploadFile extends UploadFile {
  response?: UploadResponse;
}
// 图片列表
const fileList = ref<CustomUploadFile[]>([]);

const imageList = computed(() => {
  return (
    fileList.value
      ?.filter((item) => item.status === 'done')
      ?.map((i) => i?.response?.data?.url || '') // 增加对 data 的可选链操作，并提供默认值 ''
      ?.filter((url) => url !== '') || [] // 过滤掉空字符串
  );
});

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'done') {
    errStatusArr.value.imageListStatus = '';
  } else if (info.file.status === 'error') {
    message.error(`上传失败：${info.file.name}`);
  }
};

// 删除图片
const deleteImg = (index: number) => {
  fileList.value?.splice(index, 1);
};

// 提交前的校验
const beforeSubmit = () => {
  if (imageList.value.length === 0) {
    errStatusArr.value.imageListStatus = 'error';
  }
  if (formData.value.nameZh === '') {
    errStatusArr.value.nameZhStatus = 'error';
  }
  if (formData.value.roomNum === '') {
    errStatusArr.value.roomNumStatus = 'error';
  }
  if (formData.value.sellPrice === '') {
    errStatusArr.value.sellPriceStatus = 'error';
  }
  if (formData.value.windowDesc === '') {
    errStatusArr.value.windowDescStatus = 'error';
  }
  if (formData.value.roomArea === '' && formData.value.areaType === 1) {
    errStatusArr.value.roomAreaStatus = 'error';
  }
  if (formData.value.maxArea === '' && formData.value.areaType === 2) {
    errStatusArr.value.maxAreaStatus = 'error';
  }

  // 遍历 bedTypeData 检查空值
  bedTypeList.value.forEach((item, index) => {
    if (!item.bedType && errStatusArr.value.bedTypeList[index]) {
      errStatusArr.value.bedTypeList[index].typeStatus = 'error';
    }
    if (!item.bedWidth && errStatusArr.value.bedTypeList[index]) {
      errStatusArr.value.bedTypeList[index].bedWidthStatus = 'error';
    }
    if (!item.bedNum && errStatusArr.value.bedTypeList[index]) {
      errStatusArr.value.bedTypeList[index].bedNumStatus = 'error';
    }
  });

  // 递归检查对象是否有非空值
  const checkObject = (obj: any) => {
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        const value = obj[key];
        if (typeof value === 'object' && value !== null) {
          if (checkObject(value)) {
            return true;
          }
        } else if (value) {
          return true;
        }
      }
    }
    return false;
  };

  const hasError = checkObject(errStatusArr.value);

  if (hasError) {
    message.error('请完善信息后提交!');
    return false;
  }
  return true;
};

// 保存事件
const submit = async () => {
  if (peopleErrorText.value || !beforeSubmit() || isClickAdd.value) {
    return;
  }
  isClickAdd.value = true;
  try {
    const params = {
      ...formData.value,
      bedTypeList: bedTypeList.value,
      imageList: imageList.value,
    };
    await addRoomTypeInfo(params);
    message.success('添加房型成功!');
    handleClose();
  } catch (error) {
    isClickAdd.value = false;
    console.error('添加房型失败：', error);
  }
};
</script>

<template>
  <div
    class="absolute bottom-0 right-0 flex h-[100%] w-[100%] flex-col overflow-hidden"
  >
    <div id="main" class="main overflow-auto p-4">
      <div class="mb-4 text-2xl font-bold">新增房型</div>
      <!-- 名称设置 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">名称设置</div>
        <div class="mt-3 text-lg">
          中文名称<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="pt-2">
          <Input
            v-model:value="formData.nameZh"
            :maxlength="30"
            :show-count="true"
            :status="errStatusArr.nameZhStatus"
            class="w-[400px] py-2"
            @blur="
              () => {
                !formData.nameZh
                  ? (errStatusArr.nameZhStatus = 'error')
                  : (errStatusArr.nameZhStatus = '');
              }
            "
          />
          <p
            v-if="errStatusArr.nameZhStatus === 'error'"
            class="text-md mt-1 text-red-500"
          >
            请输入
          </p>
        </div>
      </div>
      <!-- 售卖数量 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">售卖数量与价格</div>
        <div class="mt-3 text-lg">
          酒店中此类房型的总数<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="pt-2">
          <InputNumber
            v-model:value="formData.roomNum"
            :max="999"
            :min="0"
            :status="errStatusArr.roomNumStatus"
            class="w-[400px] py-1"
            @blur="
              () => {
                !formData.roomNum
                  ? (errStatusArr.roomNumStatus = 'error')
                  : (errStatusArr.roomNumStatus = '');
              }
            "
          />
          <p
            v-if="errStatusArr.roomNumStatus === 'error'"
            class="text-md mt-1 text-red-500"
          >
            请输入
          </p>
        </div>
        <div class="mt-3 text-lg">
          此房型的默认售卖价格<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="pt-2">
          <InputNumber
            v-model:value="formData.sellPrice"
            :formatter="
              (value) => {
                return `$ ${value}`;
              }
            "
            :max="99999999"
            :min="0"
            :status="errStatusArr.sellPriceStatus"
            class="w-[400px] py-1"
            @blur="
              () => {
                !formData.sellPrice
                  ? (errStatusArr.sellPriceStatus = 'error')
                  : (errStatusArr.sellPriceStatus = '');
              }
            "
            @change="
              (value) => {
                const numericValue = parseFloat(String(value));
                if (!isNaN(numericValue)) {
                  formData.sellPrice = parseFloat(
                    numericValue.toFixed(2),
                  ).toString();
                } else {
                  errStatusArr.sellPriceStatus = 'error';
                }
              }
            "
          />
          <p
            v-if="errStatusArr.sellPriceStatus === 'error'"
            class="text-md mt-1 text-red-500"
          >
            请输入
          </p>
          <p class="mt-2 text-xs text-gray-400">
            此价格为房型初始价格，在未设置价格规则的情况下生效的默认售价。
          </p>
        </div>
      </div>
      <!-- 售卖数量 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">布局和接待人数</div>
        <div class="mt-3 text-lg">床型方案</div>
        <div class="pt-2">
          <RadioGroup>
            <RadioButton :checked="true" class="h-auto py-1">
              对整个空间录入
            </RadioButton>
          </RadioGroup>
          <div class="mt-2 text-xs text-gray-500">客人无需了解户型结构</div>
        </div>
        <div class="mt-3 text-lg">接待人数</div>
        <div class="mt-1 text-xs text-gray-500">
          您设置的入住人数适用于使用现有床铺的客人，不包括使用婴儿床和加床的客人人数
        </div>
        <div class="mt-2 rounded-md bg-gray-200 bg-opacity-40 p-3 pt-4">
          <div class="flex">
            <p class="mr-3" style="width: 200px">
              床型<span class="ml-1 text-red-500">*</span>
            </p>
            <p class="mr-3" style="width: 180px">
              床宽<span class="ml-1 text-red-500">*</span>
            </p>
            <p class="mr-3" style="width: 140px">
              数量<span class="ml-1 text-red-500">*</span>
            </p>
          </div>
          <ul class="pb-2">
            <li
              v-for="(item, index) in bedTypeList"
              :key="index"
              class="flx-wrap mt-2 flex"
            >
              <div class="mr-3">
                <Select
                  v-model:value="item.bedType"
                  :options="bedTypeOptions"
                  :status="errStatusArr?.bedTypeList[index]?.typeStatus || ''"
                  size="large"
                  style="width: 200px"
                  @change="
                    () => {
                      errStatusArr.bedTypeList[index] &&
                        (errStatusArr.bedTypeList[index].typeStatus = '');
                    }
                  "
                />
                <p
                  v-if="
                    errStatusArr?.bedTypeList[index]?.typeStatus === 'error' ||
                    false
                  "
                  class="text-md mt-1 text-red-500"
                >
                  请选择
                </p>
              </div>
              <div class="mr-3">
                <InputNumber
                  v-model:value="item.bedWidth"
                  :max="getMaxWidth(item.bedType)"
                  :min="getMinWidth(item.bedType)"
                  :status="
                    errStatusArr?.bedTypeList[index]?.bedWidthStatus || ''
                  "
                  :step="0.1"
                  addon-after="m"
                  size="large"
                  style="width: 180px"
                  @blur="
                    () => {
                      if (
                        errStatusArr.bedTypeList &&
                        errStatusArr.bedTypeList[index]
                      ) {
                        !item.bedWidth
                          ? (errStatusArr.bedTypeList[index].bedWidthStatus =
                              'error')
                          : (errStatusArr.bedTypeList[index].bedWidthStatus =
                              '');
                      }
                    }
                  "
                />
                <p
                  v-if="
                    errStatusArr?.bedTypeList[index]?.bedWidthStatus ===
                      'error' || false
                  "
                  class="text-md mt-1 text-red-500"
                >
                  请输入
                </p>
              </div>
              <div class="mr-3">
                <InputNumber
                  v-model:value="item.bedNum"
                  :max="999"
                  :min="1"
                  :status="errStatusArr?.bedTypeList[index]?.bedNumStatus || ''"
                  size="large"
                  style="width: 140px"
                  @blur="
                    () => {
                      if (
                        errStatusArr.bedTypeList &&
                        errStatusArr.bedTypeList[index]
                      ) {
                        !item.bedNum
                          ? (errStatusArr.bedTypeList[index].bedNumStatus =
                              'error')
                          : (errStatusArr.bedTypeList[index].bedNumStatus = '');
                      }
                    }
                  "
                />
                <p
                  v-if="
                    errStatusArr?.bedTypeList[index]?.bedNumStatus ===
                      'error' || false
                  "
                  class="text-md mt-1 text-red-500"
                >
                  请输入
                </p>
              </div>
              <div
                v-if="bedTypeList.length > 1"
                class="text-primary flex cursor-pointer items-center"
                style="height: 40px"
                @click="deleteBedType(index)"
              >
                <MdiMinus class="mr-0.5 text-base" />删除
              </div>
            </li>
          </ul>
          <div
            v-if="bedTypeList.length < 2"
            class="text-primary flex"
            @click="addBedType"
          >
            <div class="flex w-auto cursor-pointer items-center">
              <MdiPlus class="mr-0.5 text-base" />添加
            </div>
          </div>
        </div>
        <ul class="flex flex-wrap pt-2">
          <li class="mr-3 mt-1">
            <div class="mb-2 flex items-center">
              <span class="mr-1">最多入住人数</span>
              <Popover content="客房可容纳的最多住客人数（成人+儿童）">
                <div class="cursor-pointer">
                  <MdiQuestion class="text-lg" />
                </div>
              </Popover>
              <span class="ml-1 text-red-500">*</span>
            </div>
            <Select
              v-model:value="formData.maxGuests"
              :options="options"
              size="large"
              style="width: 200px"
            />
          </li>
          <li class="mr-3 mt-1">
            <div class="mb-2 flex items-center">
              <span class="mr-1">最多入住成人</span>
              <Popover content="客房可容纳的最多成人人数">
                <div class="cursor-pointer">
                  <MdiQuestion class="text-lg" />
                </div>
              </Popover>
              <span class="ml-1 text-red-500">*</span>
            </div>
            <Select
              v-model:value="formData.maxAdult"
              :options="options"
              size="large"
              style="width: 200px"
            />
          </li>
          <li class="mr-3 mt-1">
            <div class="mb-2 flex items-center">
              <span class="mr-1">最多入住儿童</span>
              <Popover content="客房可容纳的最多儿童人数">
                <div class="cursor-pointer">
                  <MdiQuestion class="text-lg" />
                </div>
              </Popover>
              <span class="ml-1 text-red-500">*</span>
            </div>
            <Select
              v-model:value="formData.maxChild"
              :options="optionsChildren"
              size="large"
              style="width: 200px"
            />
          </li>
        </ul>
        <div v-if="peopleErrorText" class="mt-2 text-xs text-red-600">
          {{ peopleErrorText }}
        </div>
        <!-- 早餐数量 -->
        <div>
          <div class="mt-3 text-lg">
            早餐数<span class="ml-1 text-red-500">*</span>
          </div>
          <div class="pt-2">
            <InputNumber
              v-model:value="formData.breakfastCount"
              :max="999"
              :min="0"
              :status="errStatusArr.breakfastCountStatus"
              class="w-[400px] py-1"
              @blur="
                () => {
                  formData.breakfastCount === ''
                    ? (errStatusArr.breakfastCountStatus = 'error')
                    : (errStatusArr.breakfastCountStatus = '');
                }
              "
            />
            <p
              v-if="errStatusArr.breakfastCountStatus === 'error'"
              class="text-md mt-1 text-red-500"
            >
              请输入
            </p>
          </div>
        </div>
        <div class="pb-4"></div>
      </div>
      <!-- 房型条件和限制 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">房型条件和限制</div>
        <div class="mt-3 text-lg">
          窗户<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="pt-2">
          <RadioGroup
            v-model:value="formData.windowType"
            class="w-full"
            name="window"
          >
            <Radio :value="0" class="h-auto w-full py-1">
              <p class="text">全部房间有窗</p>
            </Radio>
            <div v-if="formData.windowType === 0" class="w-full py-1 pl-6">
              <div class="rounded-md bg-gray-200 bg-opacity-40 p-3">
                <p class="text text-sm">窗型说明</p>
                <Select
                  v-model:value="formData.windowDesc"
                  :options="windowDescOptions"
                  class="mt-2"
                  size="large"
                  style="width: 360px"
                  @change="
                    () => {
                      errStatusArr.windowDescStatus = '';
                    }
                  "
                />
                <p
                  v-if="errStatusArr.windowDescStatus === 'error'"
                  class="mt-1 text-sm text-red-500"
                >
                  请维护窗体信息
                </p>
                <p class="mt-1 text-xs opacity-80">
                  请注意窗户若无法打开通风会比较影响部分客人的入住体验。此类窗型，请选择“窗户无法打开”选项
                </p>
              </div>
            </div>
            <Radio :value="1" class="h-auto w-full py-1">
              <p class="text">部分房间有窗</p>
            </Radio>
            <div v-if="formData.windowType === 1" class="w-full py-1 pl-6">
              <div class="rounded-md bg-gray-200 bg-opacity-40 p-3">
                <p class="text text-sm">窗型说明</p>
                <Select
                  v-model:value="formData.windowDesc"
                  :options="windowDescOptions"
                  class="mt-2"
                  size="large"
                  style="width: 360px"
                  @change="
                    () => {
                      errStatusArr.windowDescStatus = '';
                    }
                  "
                />
                <p
                  v-if="errStatusArr.windowDescStatus === 'error'"
                  class="mt-1 text-sm text-red-500"
                >
                  请维护窗体信息
                </p>
                <p class="mt-1 text-xs opacity-80">
                  请注意窗户若无法打开通风会比较影响部分客人的入住体验。此类窗型，请选择“窗户无法打开”选项
                </p>
              </div>
            </div>
            <Radio :value="2" class="h-auto w-full py-1">
              <p class="text">全部房间无窗</p>
            </Radio>
          </RadioGroup>
        </div>
        <div class="mt-3 flex items-center text-lg">
          <p>使用面积</p>
          <Popover placement="topLeft">
            <template #content>
              <div class="text">
                <p>建议保守填写，以免客人因观感不及预期而投诉。</p>
                <p>
                  客房使用面积指客人可使用的私人区域的总面积，不包括公共浴室、公共卫浴等的面积。
                </p>
                <p>
                  若室外区域（阳台、露台、泳池等）面积占比较大，建议只填写室内面积。
                </p>
              </div>
            </template>
            <div class="flex cursor-pointer">
              <MdiQuestion class="ml-1 text-lg" />
            </div>
          </Popover>
          <span class="ml-1 text-red-500">*</span>
        </div>
        <div class="pt-2">
          <RadioGroup
            v-model:value="formData.areaType"
            class="w-full"
            name="areaType"
          >
            <Radio :value="1" class="h-auto w-full py-1">
              <p class="text">所有房型相同的面积</p>
            </Radio>
            <div v-if="formData.areaType === 1" class="w-full py-1 pl-6">
              <div class="rounded-md bg-gray-200 bg-opacity-40 p-3">
                <ul class="flex flex-wrap">
                  <li>
                    <InputNumber
                      v-model:value="formData.roomArea"
                      :max="999"
                      :min="1"
                      :status="errStatusArr.roomAreaStatus"
                      addon-after="㎡"
                      class="w-[200px] py-1"
                      @blur="
                        () => {
                          !formData.roomArea
                            ? (errStatusArr.roomAreaStatus = 'error')
                            : (errStatusArr.roomAreaStatus = '');
                        }
                      "
                    />
                    <p
                      v-if="errStatusArr.roomAreaStatus === 'error'"
                      class="mt-1 text-sm text-red-500"
                    >
                      请输入
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <!-- <Radio :value="2" class="h-auto w-full py-1">
              <p class="text">房间面积各有不同</p>
            </Radio>
            <div v-if="formData.areaType === 2" class="w-full py-1 pl-6">
              <div class="rounded-md bg-gray-200 bg-opacity-40 p-3">
                <ul class="flex flex-wrap">
                  <li>
                    <InputNumber
                      v-model:value="formData.roomArea"
                      :max="999"
                      :min="1"
                      :status="errStatusArr.roomAreaStatus"
                      addon-after="㎡"
                      class="w-[200px] py-1"
                      @blur="
                        () => {
                          !formData.roomArea
                            ? (errStatusArr.roomAreaStatus = 'error')
                            : (errStatusArr.roomAreaStatus = '');
                          if (
                            formData.maxArea &&
                            formData.roomArea &&
                            formData.roomArea >= formData.maxArea
                          ) {
                            formData.maxArea = formData.roomArea + 1;
                          }
                        }
                      "
                    />
                    <p
                      v-if="errStatusArr.roomAreaStatus === 'error'"
                      class="mt-1 text-sm text-red-500"
                    >
                      请输入
                    </p>
                  </li>
                  <li
                    class="mx-2 flex items-center text-base"
                    style="height: 40px"
                  >
                    -
                  </li>
                  <li>
                    <InputNumber
                      v-model:value="formData.maxArea"
                      :max="999"
                      :min="formData.roomArea || 1"
                      :status="errStatusArr.maxAreaStatus"
                      addon-after="㎡"
                      class="w-[200px] py-1"
                      @blur="
                        () => {
                          !formData.maxArea
                            ? (errStatusArr.maxAreaStatus = 'error')
                            : (errStatusArr.maxAreaStatus = '');
                          if (
                            formData.maxArea &&
                            formData.roomArea &&
                            formData.roomArea >= formData.maxArea
                          ) {
                            formData.maxArea = formData.roomArea + 1;
                          }
                        }
                      "
                    />
                    <p
                      v-if="errStatusArr.maxAreaStatus === 'error'"
                      class="mt-1 text-sm text-red-500"
                    >
                      请输入
                    </p>
                  </li>
                </ul>
              </div>
            </div> -->
          </RadioGroup>
        </div>
        <div class="mt-3 text-lg">楼层</div>
        <div class="pt-2">
          <Input
            v-model:value="formData.floor"
            placeholder="例：B1-B3,1,3,4-5"
            size="large"
            style="width: 220px; height: 40px"
            suffix="层"
          />
          <div class="flex">
            <Popover placement="topLeft">
              <template #content>
                <div class="text">
                  <p>1. 单层：8楼，填写为：8</p>
                  <p>2. 连续楼层：3至10楼，填写为：3-10</p>
                  <p>3. 不连续楼层：2,4,6,8,10楼，填写为：2,4,6,8,10</p>
                  <p>4. 组合楼层：6至8楼以及11楼，填写为：6-8,11</p>
                  <p>5. 地下1层，填写为B1</p>
                  <p>6. 半地下，填写为：BM</p>
                </div>
              </template>
              <div
                class="mt-2 flex cursor-pointer items-center text-xs opacity-60"
              >
                查看填写范例<MdiQuestion class="ml-1 text-sm" />
              </div>
            </Popover>
          </div>
        </div>
        <div class="mt-3 text-lg">
          吸烟信息<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="pt-2">
          <RadioGroup
            v-model:value="formData.smokingAllowed"
            class="w-full"
            name="smokingAllowed"
          >
            <Radio :value="1" class="h-auto w-full py-1">
              <p class="text">全部客房可吸烟</p>
            </Radio>
            <Radio :value="0" class="h-auto w-full py-1">
              <p class="text">全部客房禁烟</p>
            </Radio>
            <Radio :value="2" class="h-auto w-full py-1">
              <p class="text">部分客房可吸烟</p>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <!-- 房型推荐 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">房型推荐与显示</div>
        <div class="mt-2 flex flex-wrap items-center pt-2">
          是否显示：<Switch v-model:checked="formData.enableStatus" />
        </div>
        <div class="mt-2 flex flex-wrap items-center pt-2">
          是否推荐：<Switch v-model:checked="formData.isHot" />
        </div>
        <p class="mb-2 mt-1 text-xs opacity-60">
          设置为推荐房型后，将在小程序首页展示。
        </p>
      </div>
      <!-- 房型描述 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">房型描述</div>
        <div class="mt-3 text-lg">中文</div>
        <div class="pt-2">
          <Textarea
            v-model:value="formData.roomDesc"
            :auto-size="{ minRows: 5, maxRows: 5 }"
            :maxlength="400"
            :show-count="true"
            placeholder="为避免客人对该房型的实际感受不及预期导致投诉，请提供准确的附加信息。比如房间周边比较吵，或房间处于角落等情况。"
          />
          <div class="flex">
            <Popover placement="topLeft">
              <template #content>
                <div class="text">
                  <p>1、该房间面街夜晚声音较大，该房间属于角落房。</p>
                  <p>
                    2、不能出现房型设施、礼盒或者与房型无关的信息，例如：带浴缸、房型
                  </p>
                  <p>不能免费停车、房型赠送瑶药泡脚及足底穴位按压体验。</p>
                </div>
              </template>
              <div
                class="mt-2 flex cursor-pointer items-center text-xs opacity-60"
              >
                查看填写范例<MdiQuestion class="ml-1 text-sm" />
              </div>
            </Popover>
          </div>
        </div>
      </div>
      <!-- 房型图片 -->
      <div class="card-box mt-3 rounded-md p-4">
        <div class="text-lg font-bold">房型图片</div>
        <div class="mt-3 text-lg">
          图片<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="text-xs opacity-60">
          客人通常会浏览房型图片来选择心仪的房型，我们推荐上传至少4张以上的精美图片，用最佳的视角呈现酒店的床型，卫生间以及环境，这将有助于获得更多客人的青睐哦
        </div>
        <div class="flex flex-wrap pt-2">
          <div
            v-for="(item, index) in fileList"
            :key="item.uid"
            class="image-list relative my-1.5 mr-3 overflow-hidden rounded-md"
          >
            <MdiClose
              class="absolute right-0 top-0 z-[50] cursor-pointer text-xl text-gray-600"
              @click="deleteImg(index)"
            />
            <Image
              v-if="item.status === 'done'"
              :preview="true"
              :src="item.response?.data?.url || ''"
              class="h-full w-full rounded-t-md"
            />
            <div
              v-else
              class="flex h-[100%] flex-col items-center justify-center"
            >
              <LoadingOutlined
                v-if="item.status !== 'error'"
                class="text-gray-400"
              />
              <CloudUploadOutlined
                v-if="item.status === 'error'"
                class="text-gray-400"
              />
              <p class="mt-1 text-gray-400">
                {{ item.status !== 'error' ? '图片上传中...' : '图片上传失败' }}
              </p>
            </div>
          </div>
          <div
            class="image-list hover:text-primary-500 hover:border-primary-500 relative my-1.5 mr-3 flex cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-gray-400"
          >
            <MdiAdd class="text-2xl" />
            <span class="text-base">点击上传</span>
            <Upload
              v-model:file-list="fileList"
              :accept="accept"
              :action="upApi"
              :headers="headers"
              :multiple="true"
              :show-upload-list="false"
              class="absolute left-0 top-0 z-[50] h-full w-full opacity-0"
              name="file"
              @change="handleChange"
            >
              <Button class="absolute left-0 top-0 h-full w-full">上传</Button>
            </Upload>
          </div>
        </div>
        <div
          v-if="errStatusArr.imageListStatus === 'error'"
          class="text-md mt-1 text-red-500"
        >
          请至少上传一张有效的图片
        </div>
      </div>
    </div>
    <div class="card-box bottom-div flex rounded-none border-l-0 px-4 py-3">
      <Button
        class="h-auto w-auto rounded-md border-gray-400 px-6 py-2"
        @click="handleClose"
      >
        返回
      </Button>
      <Button
        :loading="isClickAdd"
        class="ml-5 h-auto w-auto rounded-md px-6 py-2"
        type="primary"
        @click="submit"
      >
        保存
      </Button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.image-list {
  width: 148px;
  height: 148px;
}

.main {
  flex: 1;
}

:deep(.ant-select-selection-item) {
  font-size: 14px;
}

:deep(.ant-input-affix-wrapper-lg) {
  font-size: 14px;
}

.text {
  color: hsl(var(--card-foreground));
}

:deep(.ant-image) {
  width: 100%;
  height: 100%;
}

:deep(.ant-image .ant-image-img) {
  height: 100%;
}
</style>
